import React from 'react';
import { Modal, Form, Input, Avatar } from 'antd';
import { connect } from 'react-redux';
import { setUserInfo } from '../../store/app.redux';
import { getLocalUserInfo } from '../../utils/global.js';

const CollectionCreateForm = ({ visible, onCreate, onCancel, avatarColor, changeColor, userNm, changeUserNm }) => {
    const [form] = Form.useForm();
    return (
        <Modal
            visible={visible}
            title="Login"
            okText="Submit"
            cancelText="Cancel"
            onCancel={onCancel}
            onOk={() => {
                form
                    .validateFields()
                    .then(values => {
                        form.resetFields();
                        onCreate(values);
                    })
                    .catch(info => {
                        console.log('Validate Failed:', info);
                    });
            }}
        >
            <Form
                form={form}
                layout="vertical"
                name="form_in_modal"
                initialValues={{
                    modifier: 'public',
                }}
            >
                <div style={{ textAlign: 'center', paddingBottom: '10px' }}>
                    <Avatar
                        style={{ backgroundColor: avatarColor, verticalAlign: 'middle' }}
                        size="large"
                        gap={3}
                        onClick={() => { changeColor() }}
                    >{userNm}</Avatar>
                </div>
                <Form.Item
                    name="userNm"
                    label="username"
                    rules={[
                        {
                            required: true,
                            message: 'Please input username',
                        },
                    ]}
                >
                    <Input onChange={(e) => { changeUserNm(e) }} maxLength={6} />
                </Form.Item>
            </Form>
        </Modal>
    );
};


@connect(
    state => ({
        blogInfoData: state.blogInfo.blogInfoData,
        userInfoData: state.app.userInfoData
    }),
    {
        setUserInfo
    }
)
class index extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            visible: false,
            ColorList: ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae'],
            userNm: '',
            avatarColor: '',
        }
        this.props.onRef(this)
    }
    componentDidMount() {
        this.changeColor();
    }
    onCreate = async (values) => {
        const avatarColor = this.state.avatarColor
        const boxType = this.props.boxType
        await localStorage.setItem('H-blog:userNm', values.userNm)//插入localStorage 的userNm
        await localStorage.setItem('H-blog:avatarColor', avatarColor)//插入localStorage 的avatarColor

        await this.props.setUserInfo(getLocalUserInfo()); //redux插入用户数据

        console.log('盒子状态', boxType);
        this.setState({
            userNm: '',
        });
        if (boxType === 'comment') {
            this.props.getCommentData();//刷新评论数据
        }
        else if (boxType === 'like') {
            
        }

        this.hideModal();//隐藏对话框
    };
    // 改变头像颜色
    changeColor = () => {
        const randomColor = this.state.ColorList[Math.floor((Math.random() * this.state.ColorList.length))]; //随机颜色
        this.setState((state) => ({
            avatarColor: randomColor
        }))
    };
    //显示对话框
    showModal = () => {
        this.setState((state) => ({
            visible: true
        }))
    }
    // 隐藏对话框
    hideModal = () => {
        this.setState((state) => ({
            visible: false
        }))
    }
    // 改变用户名称
    changeUserNm = (e) => {
        const val = e.target.value
        this.setState((state) => ({
            userNm: val
        }))
    }
    render() {

        return (
            <div>
                <CollectionCreateForm
                    visible={this.state.visible}
                    onCreate={this.onCreate}
                    onCancel={this.hideModal}
                    avatarColor={this.state.avatarColor}
                    changeColor={this.changeColor}
                    userNm={this.state.userNm}
                    changeUserNm={this.changeUserNm}
                />
            </div>
        )
    }
}


export default index;